<template>
	<view class="video-device-form">
		<!--站房基本信息 -->
		<view class="plat-info-container">
			<view class="form-header">
				<view class="flex-alin">
					<text class="header-text">站房基本信息</text>
				</view>
			</view>
			<view class="video-device-info">
				<view class="info-item-large">
					<text class="label">站房名称:</text>
					<uni-easyinput v-model="station.stationName" :clearable="false" trim="true"></uni-easyinput>
				</view>
				<view class="info-item-large">
					<text class="label">站房地址:</text>
					<uni-easyinput v-model="station.stationAddress" :clearable="false" trim="true"></uni-easyinput>
				</view>
				<view class="info-item-large">
					<text class="label">站房状态:</text>
					<uni-data-select :clear="false" v-model="station.status" :localdata="statusOption" />
				</view>
				<view class="info-item-large">
					<text class="label">网络状态:</text>
					<uni-data-select :clear="false" v-model="station.netStatus" :localdata="netStatusOption" />
				</view>
				<view class="info-item-large">
					<text class="label">设备厂家:</text>
					<!-- <uni-easyinput v-model="station.manufacturersName" :clearable="false" trim="true"></uni-easyinput> -->
					<uni-data-select :clear="false" v-model="station.manufacturersName" @change="selectManu"
						:localdata="manuOption" />
				</view>
				<view class="info-item-large">
					<text class="label">设备IP:</text>
					<uni-easyinput disabled v-model="station.deviceIp" :clearable="false" trim="true"></uni-easyinput>
				</view>
				<view class="info-item-large">
					<text class="label">用户名:</text>
					<uni-easyinput disabled v-model="station.username" :clearable="false" trim="true"></uni-easyinput>
				</view>
				<view class="info-item-large">
					<text class="label">网关密码:</text>
					<uni-easyinput disabled v-model="station.gatewayPwd" :clearable="false" trim="true"></uni-easyinput>
				</view>
				<view class="info-item-large">
					<text class="label">端口:</text>
					<uni-easyinput disabled v-model="station.port" :clearable="false" trim="true"></uni-easyinput>
				</view>

			</view>
			<button type="primary" class="save-btn" @click="save()">保存站房信息</button>
		</view>

		<!-- 底部按钮 -->
		<view class="button-bar">
			<button type="primary" class="bottom-btn" @click="goToSensorConfigure()">传感器调试</button>
			<button type="primary" class="bottom-btn" @click="goToSensorUpload()">传感器上传</button>
			<button type="primary" class="bottom-btn" @click="goToVideoConfigure()">视频调试</button>
			<button type="primary" class="bottom-btn" @click="gotoVideoUpload()">视频上传</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	import { changeData, getJsonData } from '../../js_sdk/file';

	const station = ref({});
	const gatewayData = ref();
	const videoData = ref();
	const manuList = ref([]);
	const value = ref(1);


	// const manuOption = ref([])

	// 下拉选项数据源
	const statusOption = ref([{
		text: '已调试',
		value: 1
	},
	{
		text: '未调试',
		value: 2
	}
	]);

	const netStatusOption = ref([{
		text: '良好',
		value: 1
	},
	{
		text: '弱',
		value: 2
	}
	]);

	const manuOption = ref([])


	onLoad(async (options) => {
		let manuPath = '_doc/test/manufacturers.json'
		let manuData = await getJsonData(manuPath)
		if (manuData !== '') {
			manuList.value = JSON.parse(manuData);
			for (let i = 0; i < manuList.value.length; i++) {
				let obj = { text: manuList.value[i].manufacturersName, value: manuList.value[i].manufacturersName }
				manuOption.value.push(obj)
			}

		}
		if (!Object.keys(options).length == 0) {
			station.value = JSON.parse(decodeURIComponent(options.item))
			station.value.deviceIp = station.value.gatewayData.gatewayIP
			station.value.port = station.value.gatewayData.gatewayPort
			station.value.username = station.value.gatewayData.gatewayUsername
			station.value.gatewayPwd = station.value.gatewayData.gatewayPassword
		}
	});

	const selectManu = () => {
		let find = manuList.value.find(item => item.manufacturersName === station.value.manufacturersName)
		gatewayData.value = find.gatewayData
		videoData.value = find.videoData
		station.value.deviceIp = find.gatewayData.gatewayIP
		station.value.port = find.gatewayData.gatewayPort
		station.value.username = find.gatewayData.gatewayUsername
		station.value.gatewayPwd = find.gatewayData.gatewayPassword
	}

	const save = async () => {
		let filePath = '_doc/test/station.json'
		let dataJson = await getJsonData(filePath)
		let array = JSON.parse(dataJson);
		for (let i = 0; i < array.length; i++) {
			if (array[i].stationId === station.value.stationId) {
				array[i] = station.value
				array[i].gatewayData = gatewayData.value
				array[i].videoData = videoData.value
			}
		}
		console.log('change', array);
		const change = await changeData(filePath, 0, array);
		if (change === '1') {
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			})
		}
		// uni.redirectTo({
		// 	url: "/pages/stationDetail/stationDetail"
		// })
	}

	const checkConfig = async (url) => {
		let filePath = '_doc/test/platform.json';
		let dataJson = await getJsonData(filePath)

		if (dataJson === '') {
			uni.showModal({
				title: '提示',
				content: '请配置平台默认信息',
				confirmText: "确定",
				showCancel: false,
			})
		}

		if (station.value.videoData === '' || station.value.videoData === undefined || station.value.videoData === null) {
			uni.showModal({
				title: '提示',
				content: '请选择厂家并配置厂家数据',
				confirmText: "确定",
				showCancel: false,
			})
		} else {
			uni.navigateTo({
				url: url,
			})
		}

	}
	const goToSensorConfigure = () => {
		checkConfig(`/pages/sensorConfigure/sensorConfigure?item=${encodeURIComponent(JSON.stringify(station.value))}`)
	}

	const goToSensorUpload = () => {
		checkConfig(`/pages/sensorUpload/sensorUpload?item=${encodeURIComponent(JSON.stringify(station.value))}`)

	}

	const goToVideoConfigure = () => {
		checkConfig(`/pages/videoConfigure/videoConfigure?item=${encodeURIComponent(JSON.stringify(station.value))}`)

	}

	const gotoVideoUpload = () => {
		checkConfig(`/pages/videoUpload/videoUpload?item=${encodeURIComponent(JSON.stringify(station.value))}`)
	}
</script>

<style>
	/* 基本样式 */
	.video-device-form {
		padding: 20px;
		background-color: #f7f7f7;
		height: 100%;

	}

	.header {
		/* border: 1px solid red; */
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 20px;
		position: relative;
	}


	.header-title {
		font-size: 24px;
		color: #666;
	}

	.header-text {
		font-size: 24px;
		color: #666;
	}

	.plat-info-container {
		/* margin-top: 20px; */
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 20px;
	}

	/* 视频设备信息样式 */
	.video-device-info {
		margin-top: 15px;
		/* display: grid; */
		/* grid-template-columns: repeat(2, 1fr); */
		gap: 20px;
		/* 项目之间的间距 */
		margin-bottom: 5px;
	}



	.info-item {
		flex: 1 1 calc(50% - 20px);
		/* 每个项目占50%宽度减去间距 */
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
		gap: 10px;
	}



	.label {
		font-size: 18px;
		color: #666;
		width: 120px;
		text-align: right;
		flex-shrink: 0;
		padding-right: 10px;
	}

	.input {
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 18px;

	}

	.save-btn {
		margin-top: 50px;
		width: 200px;
		background-color: #5a79ff !important;
	}

	.button-bar {
		/* position: fixed;
		bottom: 0;
		left: 0;
		right: 0; */

		display: flex;
		border-radius: 4px;
		font-size: 16px;
		padding: 20px;
		z-index: 1000;
	}

	.bottom-btn {

		background-color: #48b0b1 !important;
		/* color: white; */
		padding: 0 20px;
		border-radius: 4px;
	}

	.info-item-large {
		flex: 1 1 calc(50% - 20px);
		display: flex;
		align-items: center;
		gap: 5px;
		margin-bottom: 5px;
	}
</style>